<script setup lang="ts">
import { defineProps } from 'vue'
import {linter_email, useFooterList, useImgUrl} from "./setting";
import {useTheme} from "@/config";

const setTheme:ITheme = useTheme()
const footerList = useFooterList()
const imgUrl = useImgUrl()
const { show } = defineProps({
  show: {
    required: true,
    type: Boolean,
    default: true
  }
})
</script>

<template>
  <a-layout-footer v-if="show" class="app-bg">
    <a-flex justify="space-between" class="layout-footer">
      <ul v-for="items in footerList" :key="items.label" class="layout-ul">
        <li class="footer-ul-p">{{items.label}}</li>
        <li v-for="(item, index) in items.items" :key="index" class="layout-li">
          {{item}}
        </li>
      </ul>
      <a-space direction="vertical" style="width: 16rem" class="layout-space">
        <h3 class="title">联系我们</h3>
        <a-space :size="28">
          <a-image v-for="img in imgUrl" :key="img.id"
                   :width="42" :src="img.src"
                   :preview="false"/>
        </a-space>
        <h3 class="title">意见邮箱</h3>
        <a-form-item>
          <a-input disabled :default-value="linter_email">
            <template #prefix>
              邮箱
            </template>
          </a-input>
<!--          <a :href="'mailto:'+`${linter_email}`">点击发送</a>-->
        </a-form-item>
      </a-space>
    </a-flex>
    <a-divider>@2023-2024 Linter</a-divider>
    <a-flex justify="end">
      授权机关：滇ICP备 2023007484号
    </a-flex>
  </a-layout-footer>
<!--  :style="{borderTop: '1px solid '+setTheme?.token?.colorPrimary+'77'|| '#707070aa'}"-->
  <a-layout-footer v-else
                   style="background: transparent"
                   class="footer"
  >
    <p class="footer-title">
      <slot></slot>
    </p>
  </a-layout-footer>
</template>

<style lang="scss" scoped>
.layout-footer{
  position: relative;
  padding: 0 7%;
}
.layout-li{
  margin-bottom: 7px;
  font-size: .9rem;
}
.layout-space{
  font-size: 1.2rem;
  .title{
    font-weight: 400;
  }
}
.footer-ul-p{
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.footer{
  width: 100%;
  margin: 0;
  padding: 0;
  &-title{
    font-size: 1rem;
    text-align: center;
    color: #808080;
  }
}
</style>